<script setup>
import {reactive, defineProps, ref} from 'vue'

const props = defineProps(['formConfig', 'onSearch', 'reset','defaultForm'])
const defaultForm = {...(props.defaultForm||{})}
console.log(props)

const formData = ref({...defaultForm}||{})

const onSubmit = () => {
  props.onSearch(formData.value)
}
const onReset = (formEl) => {
  console.log(defaultForm,props.defaultForm||{})
  formData.value = props.defaultForm||{}
  props.reset()
}
</script>

<template>
  <el-form :inline="true" :model="formData" class="demo-form-inline">
    <template v-for="item in props.formConfig">
      <el-form-item v-if="item.type==='input'" :label="item.label">
        <el-input v-bind="item.config" v-model="formData[item.key]"  clearable/>
      </el-form-item>
      <el-form-item v-else-if="item.type==='select'" :label="item.label">
        <el-select v-bind="item.config" v-model="formData[item.key]">
          <el-option v-for="it in item.config.options" :label="it.label" :value="it.value" />
        </el-select>
      </el-form-item>
      <el-form-item v-else-if="item.type==='picker'" :label="item.label">
        <el-date-picker
            v-model="formData[item.key]"
            type="date"
            :placeholder="item.placeholder"
            clearable
        />
      </el-form-item>
    </template>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
      <el-button @click="onReset()">重置</el-button>
    </el-form-item>
    <el-form-item>
      <slot></slot>
    </el-form-item>
  </el-form>

</template>

<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>